<template>
    <div class="container">
        <div class="title">设备分类</div>
        <div ref="bar" id="main2" style="width: 97%; height: 81%" v-show="barData.length > 0"></div>
        <div v-if="barData.length <= 0" class="no-warn-info">
            <img :src="wugj" />
            <div>暂无设备</div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { reqDeviceType } from "@api/apiDatav.js";

export default {
    props: {},
    data() {
        return {
            wugj: require("@assets/images/datav/wugj.png"),
            barData: [],
            option: {
                color: [ '#52DDFB','#FF8DD2', '#6BA7FF', '#A9F9FF', '#FFC32A', '#A87EFF', '#FFEF83', '#00FEC4', '#F3FFD0'],
                //中间显示文字
                title: {
                    text: "总数",   //主标题
                    top: '38%',
                    left:'29%',
                    subtext: '100',   //副标题
                    textAlign: 'center', // 设置标题居中
                    textStyle: {    //标题样式
                        fontSize: 12,
                        fontWeight: "bolder",
                        color: "#fff",
                    },
                    subtextStyle: {   //副标题样式
                        fontSize: 15,
                        fontWeight: "bolder",
                        color: "#fff",
                        formatter: '',
                        lineHeight: 13,
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    type: 'scroll', // 设置图例为滚动类型
                    height: '90%', // 设置图例高度
                    pageIconColor: '#00EDFE', // 设置翻页箭头颜色
                    pageTextStyle: {
                        color: '#999' // 设置翻页数字颜色
                    },
                    pageIconSize: 11, // 设置翻页箭头大小
                    textStyle: { // 设置图例文字的样式
                        color: '#FFFFFF',
                        fontSize: 12,
                        lineHeight: 17,//行高
                    },
                    itemHeight: 10, // 设置图例项的高度
                    itemWidth: 15, // 设置图例项的宽度
                    orient: 'vertical', // 设置图例为垂直方向
                    right: '5%', // 设置图例距离容器右侧的距离为0，即紧贴着右侧
                    top: 'center', // 设置图例距离容器顶部的距离为5%
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ["55%", "74%"], //饼图占位置比例
                        center: ["30%", "50%"], //整个饼图在整个父元素中的位置
                        avoidLabelOverlap: false, //是否启用防止标签重叠策略
                        hoverAnimation: false,  //是否开启 hover 在扇区上的放大动画效果。
                        // minAngle: 15,//最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                        // startAngle: 270, //起始角度 调整生长方向，防止文字被边界遮挡
                        label: {
                            show: false,//引导线文字
                            position: 'center'
                        },
                        labelLine: {
                            show: false//引导线
                        },
                        data: []
                    }
                ],
            },
        };
    },
    computed: {
        ...mapState(["user", "datav","spacesManage"]),
    },
    async mounted() { },
    beforeDestroy() { },
    methods: {
        // 产品类型
        async DeviceType(flag = false) {
            this.barData = []
            let res = await reqDeviceType({
                tenantId: this.user.tenantId,
                orgId: flag ? this.datav.orgarr.id : "",
                roleName:this.user.roleName,
                userId:this.user.userId,
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // 检查数据是否为空，如果为空则清空图表数据
            if (res.data.row && res.data.row.length === 0) {
                this.option.series[0].data = []; // 清空图表数据
                this.$nextTick(() => {
                    var myChart = echarts.init(document.getElementById('main2'));
                    myChart.dispose();//清除 ECharts 实例
                })
            } else {
                // 如果有数据，则更新图表数据
                this.barData = res.data.row || [];
                var subtext=0//总数
                this.option.series[0].data = res.data.row.map(item => {
                    subtext+=item.count;
                    if(item.deviceType=="GasSensor"){
                        item.productName='燃气'
                    }else if(item.deviceType=="Infrared"){
                        item.productName='红外'
                    }else if(item.deviceType=="SmokeAlarm"){
                        item.productName='烟感'
                    }else if(item.deviceType=="TemperatureAlarm"){
                        item.productName='温感'
                    }else if(item.deviceType=="WaterSensor"){
                        item.productName='水浸'
                    }
                    return { value: item.count, name: item.productName }
                });
                this.option.title.subtext =subtext
                // 图例
                this.option.legend={
                    type: 'scroll', // 设置图例为滚动类型
                    height: '90%', // 设置图例高度
                    pageIconColor: '#00EDFE', // 设置翻页箭头颜色
                    pageTextStyle: {
                        color: '#FFFFFF' // 设置翻页数字颜色
                    },
                    pageIconSize: 11, // 设置翻页箭头大小
                    textStyle: { // 设置图例文字的样式
                        color: '#FFFFFF',
                        fontSize: 12,
                        lineHeight: 17,//行高
                    },
                    itemHeight: 10, // 设置图例项的高度
                    itemWidth: 15, // 设置图例项的宽度
                    orient: 'vertical', // 设置图例为垂直方向
                    right: '8%', // 设置图例距离容器右侧的距离为0，即紧贴着右侧
                    top: 'center', // 设置图例距离容器顶部的距离为5%
                    formatter:  name=>{
                        var count = "";
                        for(var i=0;i<this.option.series[0].data.length;i++) {
                           if (this.option.series[0].data[i].name == name) {  
                            count=this.option.series[0].data[i].value;
                           }
                        }
                        return name+'    '+count+'    '+Math.round(((count/subtext)*100))+'%';
                    }
                }
                this.$nextTick(() => {
                    this.getCahrt();
                })
            }
        },
        getCahrt() {
            var chartDom = document.getElementById("main2");
            var deviceType = echarts.init(chartDom); // 基于准备好的dom，初始化echarts实例
            let listener = function () {
                deviceType.resize();
            };
            window.addEventListener("resize", listener);
            this.option && deviceType.setOption(this.option); // 使用指定的配置项和数据显示图表。
        },
    },
};
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.width (@px, @attr: width) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.height (@px, @attr: height) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.top (@px, @attr: top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.left (@px, @attr: left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.right (@px, @attr: right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
    @vh: (@px / 1080) * 100;
    @{attr}:~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
    @vw: (@px / 1920) * 100;
    @{attr}:~"@{vw}vw";
}

.container {
    height: 100%;
    width: 100%;

    .title {
        .height(43);
        width: 58%;
        margin: 0 auto;
        .fontSize(16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../../assets/images/datav/head.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600;
    }
}

::v-deep .el-progress__text {
    font-size: 17px !important;
}

.progress {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 66%;
}

.no-warn-info {
    width: 100%;
    height: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-top: 1.5%;
    color: #fff;
    font-size: 0.7vw;

    >img {
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
    }
}
</style>